<template>
	<view class="content">
		<view class="banner">
			<view class="city" @click="navigate('/page_other/select_area/select_area')">{{name}}<i
					class="iconfont icon-zhankai1"></i></view>
			<swiper style="height: 500rpx;width: 100%;" :indicator-dots="false" :autoplay="true" :circular="true"
				:interval="5000">
				<swiper-item v-for="(item,index) in swiperList" :key="item.id">
					<image style="width: 100%;" :src="item.url" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="function-selection">
			<view class="activity" @click="navigate('/page_other/activity/activity')"
				style="background: url('https://www.hxzxczx.cn/file/uploads/3.png') no-repeat right top/100% 200rpx;">
				<view class="activity-left">
					<view class="title">村级活动</view>
					<!-- <view class="describe">描述描述描述描述描述</view> -->
				</view>
			</view>
			<view class="activity" @click="navigate('/page_other/learn/learn')"
				style="background: url('https://www.hxzxczx.cn/file/uploads/1.png') no-repeat right top/100% 200rpx;">
				<view class="activity-left">
					<view class="title">在线学习</view>
					<!-- <view class="describe">描述描述描述描述描述</view> -->
				</view>
			</view>
			<view class="activity" @click="navigate('/page_other/shopping/shopping')"
				style="background: url('https://www.hxzxczx.cn/file/uploads/2.png') no-repeat right top/100% 200rpx;">
				<view class="activity-left">
					<view class="title">积分商城</view>
					<!-- <view class="describe">描述描述描述描述描述</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSwipperListApi
	} from '@/api/home.js'
	import {
		getStorage
	} from '@/util/auth.js';
	export default {
		data() {
			return {
				info: {},
				swiperList: [],
				in: null,
				name: ''
			}
		},
		onLoad(e) {
			console.log(e)
			this.name = getStorage('villageName')
			this.id = getStorage('villageId')
			this.getSwipperList()
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getSwipperList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getSwipperListApi().then(res => {
					uni.hideLoading()
					this.swiperList = res.list
				}).catch(() => {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.content {
		width: 100%;

		.city {
			position: absolute;
			z-index: 3;
			padding-top: 120rpx;
			padding-left: 40rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			font-size: 30rpx;

			.iconfont {
				font-size: 24rpx;
				margin-left: 20rpx;
			}
		}

		.function-selection {
			position: absolute;
			box-sizing: border-box;
			width: 100%;
			padding: 45rpx 30rpx 0 30rpx;
			margin-top: -50rpx;
			border-radius: 60rpx 60rpx 0 0;
			background-color: #FFFFFF;
			z-index: 2;

			.activity {
				display: flex;
				justify-content: center;
				box-sizing: border-box;
				width: 690rpx;
				height: 200rpx;
				margin-bottom: 30rpx;

				.activity-left {
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					justify-content: center;

					.title {
						color: #fff;
						font-size: 40rpx;
					}

					.describe {
						margin-top: 10rpx;
						color: #fff;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>